<template>
    <div class="nav-header" :class="theme">
        <div class="tip"></div>
        <div class="nav-inner">
            <div class="logo-wrap" @click="jumpToHome">
                <div class="iconfont icon-logo" href="javascript:;" />
                <div class="logo-name">
                    <div class="name">
                        新掌大
                    </div>
                    <div class="sub-name">
                        企业的校园事业部
                    </div>
                </div>
            </div>
            <!-- 导航列表 -->
            <ul class="nav-wrapper">
                <li
                    v-for="(item, index) in siteMenu"
                    :key="index"
                    class="nav-item-wrap"
                >
                    <!-- TODO 添加首页占位,tovip动画用 -->
                    <a
                        ref="nav"
                        class="nav-item"
                        :class="{ active: activeMenu == index }"
                        href="javascript:;"
                        @click="openLink(item)"
                    >
                        {{ item.menu_name }}
                    </a>
                    <span class="active-line">
                        <i />
                    </span>
                </li>
            </ul>
            <div v-click-outside="closeAppCode" class="app-wrap">
                <i
                    class="iconfont icon-shouji header-phone-icon"
                    @click="showAppCode = !showAppCode"
                />
                <div class="header-phone-detail" :class="{ show: showAppCode }">
                    <div class="drop-left">
                        <p class="title">
                            掌上大学APP
                        </p>
                        <p class="info">
                            手机扫描二维码
                        </p>
                        <p class="info">
                            下载掌上大学APP
                        </p>
                    </div>
                    <img
                        class="drop-right"
                        src="//cdn.zsdx.cn/zsdx-website/2020/images/common/downloadQRCode.png"
                    />
                </div>
            </div>
            <template v-if="$route.path !== '/login' && $store.path !== 'reg'">
                <div class="btn-split"></div>
                <!-- 用户信息导航 -->
                <div v-if="!isLogin" class="header-personal-wrapper">
                    <div class="unlogin">
                        <div
                            class="header-button primary"
                            @click="jumpout('login')"
                        >
                            登录
                        </div>
                        <div
                            class="header-button btn-reg"
                            @click="jumpout('reg')"
                        >
                            注册
                        </div>
                    </div>
                    <div v-if="false" class="logined"></div>
                </div>
                <el-dropdown
                    v-if="isLogin"
                    class="user-head-wrapper"
                    placement="bottom-start"
                    @command="handleClick"
                >
                    <div
                        class="user-head-img pointer"
                        :class="{
                            'iconfont icon-duihao':
                                userInfo && userInfo.auth_status == 2
                        }"
                    >
                        <div class="user-info-wrap">
                            <div
                                class="user-head"
                                :style="
                                    'background-image: url(' +
                                        (companyInfo.logo ||
                                            '//cdn.zsdx.cn/wei/images/hire/common/company_default.png') +
                                        ')'
                                "
                            ></div>
                            <div class="user-name ellipsis">
                                {{ companyInfo.name || userInfo.phone }}
                            </div>
                        </div>
                        <span class="active-line">
                            <i />
                        </span>
                    </div>

                    <el-dropdown-menu
                        slot="dropdown"
                        class="header-nav-dropdown"
                    >
                        <el-dropdown-item
                            v-if="
                                userStatus.deposit_status == 1 &&
                                    userStatus.company_verify !== 2
                            "
                        >
                            <div>
                                <a href="javascript:;" @click="fnGoAuth()"
                                    >企业认证</a
                                >
                            </div>
                        </el-dropdown-item>
                        <div
                            v-if="
                                userStatus.deposit_status == 1 &&
                                    userStatus.company_verify !== 2
                            "
                            class="spliter"
                        />
                        <el-dropdown-item>
                            <a href="javascript:;" @click="logout">退出</a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="button-wrap">
                    <div
                        v-if="isLogin && userStatus.shop_verify == 1"
                        class="header-button disabled"
                        type="disabled"
                        @click="fnGoVerifying()"
                    >
                        审核中
                    </div>
                    <div
                        v-else-if="isLogin && userStatus.shop_verify == -1"
                        class="header-button disabled"
                        type="disabled"
                        @click="fnGoReVerify()"
                    >
                        重新提交
                    </div>
                    <div
                        v-else-if="isLogin"
                        class="header-button primary"
                        type="primary"
                        @click="fnGoAdmin()"
                    >
                        进入后台
                    </div>
                </div>
            </template>
            <div v-else class="seat"></div>
        </div>
        <login-modal />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import ClickOutside from 'vue-click-outside'
import loginModal from '@/components/login/login-modal'
import checkEnv from '@/assets/js/mixin/checkEnv'
export default {
    components: { loginModal },
    directives: {
        ClickOutside
    },
    mixins: [checkEnv],
    data() {
        return {
            routerPath: '/aboutus',
            siteMenu: [
                {
                    menu_name: '校园事业部',
                    menu_link: '/index',
                    menu_type: 1
                },
                {
                    menu_name: '解决方案',
                    menu_link: '/solutions',
                    menu_type: 1
                },
                {
                    menu_name: '产品矩阵',
                    menu_link: '/product',
                    menu_type: 1
                },
                {
                    menu_name: '校园品牌说',
                    menu_link: '/brands',
                    menu_type: 1
                },
                {
                    menu_name: '动态',
                    menu_link: 'http://nm.zsdx.cn/',
                    menu_type: 2,
                    menu_target: 'self'
                }
            ],
            showInfo: false,
            showAppCode: false
        }
    },
    computed: {
        ...mapState({
            theme: (state) => state.header.style,
            companyInfo: (state) => state.companyInfo.companyInfo,
            userInfo: (state) => state.userInfo.userInfo,
            userStatus: (state) => state.userInfo.status,
            isLogin: (state) => state.userInfo.isLogin
        }),
        activeMenu() {
            for (const i in this.siteMenu) {
                if (this.routerPath.indexOf(this.siteMenu[i].menu_link) == 0) {
                    return i
                }
            }
            if (this.routerPath.indexOf('/aboutus') == 0) {
                return -1
            }
            return 0
        }
    },
    watch: {
        $route(val) {
            this.routerPath = val.path
        }
    },
    created() {
        if (!process.server) {
            this.checkLogin((result) => {
                this.$store.commit(
                    'userInfo/SET_IS_LOGIN',
                    result.is_login == 1
                )
                if (result.is_login == 1) {
                    this.getComponeyInfo()
                    this.getUserInfo()
                    this.getUserStatus()
                }
                this.routerPath = this.$route.path
            })
        }
        // 判断来源,方便seo优化追踪来源
        if (this.$route.query.channel) {
            this.$store.commit('userInfo/SET_SALES', {
                channel: this.$route.query.channel,
                platform: this.$route.query.platform
                    ? this.$route.query.platform
                    : 'web'
            })
        }
    },
    methods: {
        jumpout(type) {
            this.$store.commit('isLogin/SHOW_LOGIN', { type })
        },
        checkActive(item) {
            if (this.routerPath === item.menu_link) {
                return true
            }
            if (item.menu_link == '/index') {
                for (const i in this.siteMenu) {
                    if (this.routerPath == this.siteMenu[i].menu_link) {
                        return false
                    }
                }
                if (this.routerPath == '/aboutus') {
                    return false
                }
                return true
            }
            return false
        },
        /**
         * 跳转到首页
         */
        jumpToHome() {
            this.$router.push('/')
        },
        closeAppCode() {
            this.showAppCode = false
        },
        openLink(item) {
            let str = item.menu_link
            const type = item.menu_type
            const withTicket = item.withTicket

            if (!str) {
                return
            }
            if (type == 1) {
                this.$router.push(str)
                return
            } else if (type == 2) {
                window.open(str, '_blank')
                return
            }

            // 是否需要加入ticket以自动登录
            if (withTicket) {
                str += str.includes('?')
                    ? '&ticket=' + this.$getSessionTicket()
                    : '?ticket=' + this.$getSessionTicket()
            }
            if (!/^https?:\/\//.test(str)) {
                str = 'http://' + str
            }
            if (item.menu_target == 'self') {
                window.location.href = str
            } else {
                window.open(str)
            }
        },
        getUserInfo() {
            this.$post('/UserCenter/getUserInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit('userInfo/SET_USER_INFO', resp.data)
                }
            })
        },
        /**
         * 获取公司信息
         */
        getComponeyInfo() {
            this.$post('/UserCenter/getUserCompanyInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit(
                        'companyInfo/SET_COMPANY_INFO',
                        resp.data
                    )
                } else {
                    // this.$notify.error({
                    //     title: '错误',
                    //     duration: 2000,
                    //     message:
                    //         resp.msg ||
                    //         '获取公司信息失败，请稍后重试或者联系客服'
                    // })
                    console.log(resp.msg)
                }
            })
        },
        getUserStatus() {
            const schemes = location.href.includes('https') ? 'https:' : 'http:'

            this.$post(
                this.checkEnv()
                    ? `${schemes}//student-api.zsdx.cn/hire/UserCenter/getInfo`
                    : `${schemes}//student-api-dev.wxhand.com/hire/UserCenter/getInfo`,
                {}
            ).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit('userInfo/SET_USER_STATUS', resp.data)
                } else {
                    console.log(resp.msg)
                }
            })
        },
        checkLogin(success) {
            this.$post('/User/checkLogin', {}).then((resp) => {
                if (resp.code == 1) {
                    success && success(resp.data)
                }
            })
        },
        /**
         * 退出登陆
         */
        logout() {
            this.$post('/User/logout', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit('userInfo/RESET_USER_INFO')
                    this.$store.commit('userInfo/SET_IS_LOGIN', false)
                    this.$router.push({
                        path: '/index'
                    })
                }
            })
        },
        fnGoAdmin() {
            location.href =
                this.getHireHost() +
                '?session_ticket=' +
                this.$getSessionTicket()
        },
        fnGoAuth() {
            location.href =
                this.getHireHost() +
                '/certification' +
                '?session_ticket=' +
                this.$getSessionTicket()
        },
        fnGoVerifying() {
            location.href =
                this.getHireHost() +
                '/shop/shop-form?shop_verify=1' +
                '&session_ticket=' +
                this.$getSessionTicket()
        },
        fnGoReVerify() {
            location.href =
                this.getHireHost() +
                '/shop/shop-form?shop_verify=-1' +
                '&session_ticket=' +
                this.$getSessionTicket()
        },
        handleClick(commend) {}
    }
}
</script>

<style lang="less" scoped>
.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px 0px rgba(13, 9, 45, 0.1);
}
.nav-inner {
    margin: 0 auto;
    position: relative;
    display: flex;
    align-content: center;
    max-width: 1400px;
    height: 70px;
}
.nav-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .nav-item {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 70px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: #3f454b;
        transition: color 0.3s ease-in-out;
        user-select: none;
        outline: none;
        &.active {
            color: #20a0ff;
        }
    }
    .active-line {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        width: 100%;
        i {
            display: block;
            width: 0;
            height: 3px;
            border-radius: 3px;
            margin: 0 auto;
            background-color: #20a0ff;
            transition: all 0.3s;
        }
    }
    .nav-item-wrap {
        width: 130px;
        height: 70px;
        position: relative;
        &:hover {
            .active-line i {
                width: 100%;
            }
            .nav-item {
                color: #20a0ff;
            }
        }
    }
}
.logo-wrap {
    width: 160px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    cursor: pointer;
    color: #20a0ff;
    transition: color 0.3s ease-in-out;
    flex-shrink: 0;
    .icon-logo {
        margin-right: 10px;
        font-size: 40px;
        line-height: 40px;
        vertical-align: middle;
    }
    .logo-name {
        flex: 1;
        .name {
            height: 14px;
            font-size: 14px;
            font-weight: 500;
            line-height: 14px;
        }
        .sub-name {
            height: 12px;
            font-size: 12px;
            font-weight: 400;
            line-height: 12px;
            margin-top: 8px;
        }
    }
}
.app-wrap {
    height: 70px;
    margin: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .header-phone-icon {
        font-size: 24px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.5);
        transition: color 0.3s ease-in-out;
        cursor: pointer;
    }
    .header-phone-detail {
        width: 300px;
        max-height: 0;
        padding: 0 20px;
        box-sizing: border-box;
        position: absolute;
        top: 70px;
        left: -140px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        align-items: center;
        transition: all ease-in-out 0.3s;
        display: flex;
        overflow: hidden;
        &::before {
            content: ' ';
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: #fff;
            position: absolute;
            top: -20px;
            left: 143px;
        }
        &.show {
            max-height: 150px;
            padding: 15px 20px;
        }
    }
    .drop-left {
        flex: 1;
        display: inline-block;
        line-height: 16px;
        vertical-align: middle;
        .title {
            margin-top: 10px;
            height: 16px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(29, 32, 35, 1);
            margin-bottom: 12px;
        }
        .info {
            width: 130px;
            height: 20px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .drop-right {
        width: 90px;
        height: 90px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px;
        img {
            width: 90px;
            height: 90px;
        }
    }
}
.btn-split {
    width: 1px;
    height: 20px;
    background-color: rgba(216, 216, 216, 1);
    margin-top: 25px;
}
.seat {
    width: 2rem;
}
.header-personal-wrapper {
    height: 70px;
    padding: 0 30px;
}
.unlogin {
    height: 100%;
    width: 170px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.button-wrap {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-button {
        margin-left: 0.1rem;
    }
}
.header-button {
    display: inline-block;
    cursor: pointer;
    // width: 70px;
    padding: 0 20px;
    height: 36px;
    background: #fff;
    border: #20a0ff;
    border-radius: 4px;
    transition: background ease-in-out 0.1s;
    text-align: center;
    line-height: 36px;
    color: #20a0ff;
    font-size: 14px;
    letter-spacing: 1px;
    user-select: none;
    outline: none;
    border: 0;
    &:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    &:active {
        background: rgba(0, 0, 0, 0.7);
    }
    &.primary {
        background: rgba(32, 160, 255, 1);
        color: #fff;
        // &:hover {
        //     background: rgb(74, 156, 219);
        // }
        &:active {
            background: rgba(32, 160, 255, 0.7);
        }
    }
}
.btn-reg {
    border: 1px solid #20a0ff;
    &:hover {
        background: rgba(32, 160, 255, 1);
        color: #fff;
    }
}
.user-head-wrapper {
    width: 1.3rem;
    margin-left: 0.3rem;
}
.user-head-img {
    width: 100%;
    display: inline-block;
    height: 100%;
    font-size: 16px;
    color: #fff;
    vertical-align: middle;

    .user-info-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        // margin-left: -1.7rem;
        position: absolute;
        top: 0;
        left: 0;
        .user-head {
            width: 0.3rem;
            height: 0.3rem;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 0.3rem;
            margin-right: 0.1rem;
            position: relative;
            .icon {
                width: 0.12rem;
                height: 0.12rem;
                position: absolute;
                right: -0.03rem;
                bottom: -0.03rem;
            }
        }
        .user-name {
            flex: 1;
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            max-width: 0.9rem;
        }
    }

    &:hover {
        .active-line i {
            width: 100%;
        }
    }

    img {
        width: 0.36rem;
        height: 0.36rem;
        border-radius: 50%;
    }

    &.icon-duihao {
        &:before {
            position: absolute;
            right: 0.11rem;
            bottom: 0.12rem;
            color: rgb(19, 206, 102);
            background-color: #fff;
            border-radius: 50%;
        }
    }
    .vipIcon {
        width: 0.12rem;
        height: 0.12rem;
        position: absolute;
        top: -0.04rem;
        left: -0.02rem;
        border-radius: 50%;
    }
}
.submenu-dropdown,
.header-nav-dropdown {
    // width: .9rem;
    // padding: .1rem auto .1rem;
    border-radius: 0.04rem;
    margin-top: 0;
    a {
        display: block;
        color: #475669;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        &.active {
            color: #20a0ff;
        }
    }

    li {
        &:hover {
            color: #fff;
            background-color: #20a0ff;
            a {
                color: #fff;
                background-color: #20a0ff;
            }
        }
    }
}
.header-nav-dropdown {
    width: 1.3rem;
    .spliter {
        width: 100%;
        height: 1px;
        background: #ccc;
    }
}
.submenu-dropdown {
    a {
        padding: 0 0.1rem;
    }
}
.dark {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    .logo-wrap {
        .icon-logo,
        .name,
        .sub-name {
            color: #fff;
        }
    }
    .nav-item-wrap {
        &:hover {
            .nav-item {
                color: #fff;
            }
        }
    }
    .btn-split {
        background-color: rgba(255, 255, 255, 0.5);
    }
    .nav-item {
        color: rgba(255, 255, 255, 0.6);
    }
    .cart-wrapper {
        color: rgba(255, 255, 255, 0.6);
        &:hover {
            i {
                color: #fff;
            }
        }
    }
    .user-name {
        color: #fff !important;
    }
    .active-line {
        display: none;
    }
    .phoneIcon {
        i {
            background: url(//cdn.zsdx.cn/wei/images/hire/home/shouji1111.png)
                no-repeat;
            background-size: 0.2rem 0.22rem;
        }
        &:after {
            border-left: 0.01rem solid #fff;
        }
    }
    .header-button {
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        &:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        &:active {
            background: rgba(255, 255, 255, 0.7);
        }
        &.primary {
            background: rgba(32, 160, 255, 1);
            color: #fff;
            // &:hover {
            //     background: rgb(74, 156, 219);
            // }
            &:active {
                background: rgba(32, 160, 255, 0.7);
            }
        }
    }
    .header-phone-icon {
        color: rgba(255, 255, 255, 0.7);
    }
}
</style>
